<template>
  <!-- 分包预留页面 -->
  <view class="pageLayout">
    <view class="title">
      <view class="head">
        <text class="chn">隐耀</text>
        <text class="eng">TECHUP</text>
      </view>
      <view class="tips"> 收集汇总问题，解决共性问题 </view>
    </view>
    <view class="btn" @click="gotoIndex">
      <div class="liquid_glass-outer"></div>
      <div class="liquid_glass-cover"></div>
      <div class="liquid_glass-sharp"></div>
      <div class="liquid_glass-reflect"></div>
      <view class="btnText">立即体验</view>
    </view>
    <!-- 隐私协议 -->
    <!-- #ifdef MP-WEIXIN -->
    <privacy-popup ref="privacyComponent"></privacy-popup>
    <!-- #endif -->
  </view>
</template>

<script>
import store from "../../store/index";
export default {
  components: {},
  data() {
    return {};
  },
  computed: {
    hasLogin() {
      return this.$store.state.token && this.$store.state.token.length > 0;
    },
  },
  methods: {
    /**
     * 跳转到首页
     */
    gotoIndex() {
      uni.switchTab({
        url: "/pages/welcome/index",
      });
    },
  },
  onShow() {},
  /**
   * 上拉加载更多
   */
  onReachBottom() {},
};
</script>

<style lang="scss" scoped>
.pageLayout {
  padding: 0;
  width: 100%;
  height: 100vh;
  // background-image: url("https://www.yinyaoit.com/YY/welcome_banner.jpg");
  background-image: url("https://www.yinyaoit.com/YY/welcome_banner_gif.gif");
  background-size: 100% 100%;
  position: relative;
}
.btn {
  position: absolute;
  bottom: 245rpx;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffffff38;
  // backdrop-filter: blur(2px);
  width: 382rpx;
  height: 88rpx;
  text-align: center;
  font-size: 30rpx;
  line-height: 88rpx;
  border-radius: 18rpx;
  overflow: hidden;
  // border: 1px solid #ffffffee;
  // box-shadow: inset 1px 1px 0px 0px rgba(238, 238, 238, 0.5),
  //   inset -1px -1px 0px 0px rgba(231, 231, 231, 0.6);
  .liquid_glass-outer {
    position: absolute;
    inset: 0;
    z-index: 0;
    mask-composite: exclude;
  }

  .liquid_glass-cover {
    backdrop-filter: blur(2px) ;
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(255, 255, 255, 0.12);
  }

  .liquid_glass-sharp {
    position: absolute;
    inset: 0;
    z-index: 3;

    box-shadow: inset 1px 1px 0px 0px rgba(233, 233, 233, 0.329),
      inset -1px -1px 2px 2px rgba(173, 173, 173, 0.336);
  }

  .liquid_glass-reflect {
    position: absolute;
    inset: 1px;
    z-index: 2;

    box-shadow: inset 2px 2px 6px 2px rgba(170, 170, 170, 0.123),
      inset -2px -2px 4px -1px rgba(105, 105, 105, 0.2);
  }
  .btnText {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
  }
}
.title {
  position: absolute;
  top: 400rpx;
  left: 50rpx;
  .head {
    text {
      font-size: 60rpx;
      font-weight: bolder;
      margin-right: 20rpx;
    }
    .chn {
      color: #333333;
    }
    .eng {
      color: #a22c26;
    }
  }
  .tips {
    font-size: 30rpx;
    color: #666;
    margin-top: 20rpx;
  }
}
</style>